<template>
  <div class="home">
    <div class="date-box">
      <input type="date" v-model="date" class="dateInput" />
    </div>
    <div class="box-card">
      <div
        class="card"
        :class="type === 'sign' ? 'active1' : ''"
        @click="type = 'sign'"
      >
        签到情况
      </div>
      <div
        class="card"
        :class="type === 'noSign' ? 'active' : ''"
        @click="type = 'noSign'"
      >
        寝室签到情况
      </div>
      <div
        class="card"
        :class="type === 'vacation' ? 'active2' : ''"
        @click="type = 'vacation'"
      >
        寝室请假情况
      </div>
    </div>
    <div class="box-body">
      <div id="echart" style="height: 200px; width: 100%"></div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts/lib/echarts";
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/chart/radar");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
import { get } from "@/assets/api/moudules/face";
var myChart;
export default {
  name: "Home",
  data() {
    return {
      date: this.formatDate(new Date(), "yyyy-MM-dd"),
      type: "sign",
      sign: 0,
      noSign: 0,
      vacation: 0,
      signList: [],
      noSignList: [],
      vacationList: [],
    };
  },
  watch: {
    date(val) {
      console.log(val);
      this.getMessage();
    },
    type() {
      this.getMessage()
    },
  },
  mounted() {
    myChart = echarts.init(document.getElementById("echart"));
    this.getMessage();
  },
  methods: {
    getMessage() {
      get(this.date).then((res) => {
        if (res.code === 200) {
          this.sign = res.data.sign;
          this.noSign = res.data.noSign;
          this.vacation = res.data.vacation;
          this.signList = res.data.signList;
          this.noSignList = res.data.noSignList;
          this.vacationList = res.data.vacationList;
          if (this.type === "sign") {
            this.getEchart1();
          } else if (this.type === "noSign") {
            this.getEchart2();
          } else {
            this.getEchart3();
          }
        }
      });
    },
    getEchart1() {
      var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: ["未签到", "已签到", "已请假"],
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.noSign, name: "未签到" },
              { value: this.sign, name: "已签到" },
              { value: this.vacation, name: "已请假" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
    getEchart2() {
        let cNosignList={}
        let data1 = []
        let data2 = []
        for(let i=0;i<this.noSignList.length;i++){
           if(cNosignList[this.noSignList[i].dormitoryNum]){
               cNosignList[this.noSignList[i].dormitoryNum] ++
           } else {
               cNosignList[this.noSignList[i].dormitoryNum] = 1
           }
        }
        Object.keys(cNosignList).forEach(key => {
            data1.push({ value: cNosignList[key], name: key + '寝室' })
            data2.push(key + '寝室')
        })
        var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: data2,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: data1,
          },
        ],
      };
      myChart.setOption(option);
    },
    getEchart3() {
        let cVacationList={};
        let data1 = []
        let data2 = []
        for(let i=0;i<this.vacationList.length;i++){
           if(cVacationList[this.vacationList[i].dormitoryNum]){
               cVacationList[this.vacationList[i].dormitoryNum] ++
           } else {
               cVacationList[this.vacationList[i].dormitoryNum] = 1
           }
        }
        Object.keys(cVacationList).forEach(key => {
            data1.push({ value: cVacationList[key], name: key + '寝室' })
            data2.push(key + '寝室')
        })

        var option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
          orient: "vertical",
          left: 10,
          data: data2,
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: ["50%", "70%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data:data1,
          },
        ],
      };
      myChart.setOption(option);
    },
    formatDate(date, format) {
      var paddNum = function (num) {
        num += "";
        return num.replace(/^(\d)$/, "0$1");
      };
      var cfg = {
        yyyy: date.getFullYear(),
        yy: date.getFullYear().toString().substring(2),
        M: date.getMonth() + 1,
        MM: paddNum(date.getMonth() + 1),
        d: date.getDate(),
        dd: paddNum(date.getDate()),
        hh: date.getHours(),
        mm: date.getMinutes(),
        ss: date.getSeconds(),
      };
      format || (format = "yyyy-MM-dd hh:mm:ss");
      return format.replace(/([a-z])(\1)*/gi, function (m) {
        return cfg[m];
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.home {
  font-size: $font-size-small;

  .date-box {
    width: 100%;
    padding: 10px 10px 0px 10px;

    .dateInput {
      width: 100%;
      height: 30px;
      border-radius: 5px;
      text-align: center;
      background-color: #fff;
      outline: none;
    }
  }

  .box-card {
    display: flex;
    padding: 10px 10px 0px 10px;

    .card {
      flex: 1;
      height: 50px;
      line-height: 50px;
      text-align: center;
      background-color: #fff;
      border-radius: 5px;
      transition: all 0.4s;

      &:nth-child(2) {
        margin: 0 10px;
      }
    }

    .active {
      background-color: #f56c6c;
      color: #fff;
    }

    .active1 {
      background-color: #409eff;
      color: #fff;
    }

    .active2 {
      background-color: #67c23a;
      color: #fff;
    }
  }

  .box-body {
    margin: 10px;
    padding: 20px;
    border-radius: 5px;
    background-color: #fff;
  }
}
</style>
